<template>
  <div class="page">
    <van-nav-bar
      title="欢迎使用家庭管理"
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

      <div class="page_div">
        <van-loading v-if="pageLoading" class="loading" color="#1989fa" />

        <div v-else class="swipe-div">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
            <van-swipe-item v-for="(src,index) in imageList" :key="index">
              <van-image class="swipe_image" :src="src" fit="contain" @click="clickImage(src,index)" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 首页标签栏 -->
        <div class="grid_div">
          <van-grid clickable :column-num="1" square :gutter="10">
            <!-- icon-图标  text-显示的文字 to-点击跳转的路径 -->
            <!-- <van-grid-item icon="passed" text="登录" to="/login" /> -->
            <van-grid-item icon="point-gift-o" text="存奶管理" to="/milk/index" />
          <!-- <van-grid-item icon="friends-o" text="学生管理" to="/studentManager/index" /> -->
          <!-- <van-grid-item icon="info-o" text="任务管理" to="/taskManager/index" /> -->
          <!-- <van-grid-item icon="photo-o" text="资源管理" to="/teacher/resourceManager" /> -->
          <!-- <van-grid-item icon="send-gift-o" text="答疑管理" to="/disscuss/index" /> -->
          <!-- <van-grid-item icon="todo-list-o" text="日报管理" /> -->
          <!-- <van-grid-item icon="play-circle-o" text="视频管理" /> -->
          </van-grid>
        </div>
      </div>
    </van-pull-refresh>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item name="home" icon="home-o">主页</van-tabbar-item>
      <van-tabbar-item name="my" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { getMilkInfoById } from '@/api/system.js'
export default {
  name: 'HomeIndex',
  data: function() {
    return {
      msg: '主页',
      active: 'home',
      imageList: [],
      isLoading: false,
      pageLoading: true
    }
  },
  mounted() {
    // 获取轮播图
    getMilkInfoById().then((res) => {
      this.imageList = res.data.map(item => item.url)
      this.pageLoading = false
    })
  },
  methods: {
    onChange(index) {
      if (index === 'my') {
        this.$store.dispatch('setting/setRouter', index)
        this.$router.push({ path: '/my/index' })
      }
    },
    clickImage(src, index) {
      console.log(index, src)
      ImagePreview([src])
    },
    // 刷新列表
    onRefresh() {
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态

      // 获取轮播图
      getMilkInfoById().then((res) => {
        this.imageList = res.data.map(item => item.url)
        this.isLoading = false
      })
    }
  }
}

</script>

  <style scoped>
  .my-swipe .van-swipe-item {
    color: #FFF;
    font-size: 20px;
    line-height: 0px;
    text-align: center;
    background-color: #FFF;
  }
  .swipe_div {
    height: 160px;
  }
  .loading {
    height: 160px;
    justify-content: center;
  }
  .swipe_image {
    height: 160px;
    width: 100%
  }
  .page_div {
    height: 90vh;
    background-color: rgb(238, 233, 233);
  }
  .grid_div {
    margin-top: 10px;
  }
  </style>
